<template>
  <div>
    <vxe-modal
        v-model="show" id="add" width="50%" :size="size" :position="{top: 100}"
        @close="closeForm()" @show="open" show-zoom="" resize="" transfer="" show-footer="">
      <!-- storage 将窗口拖动的状态保存到本地 remember 再次打开窗口时还原窗口状态-->
      <!--标题-->
      <template #title>
        <h3>添加菜单</h3>
      </template>
      <!--主体-->
      <template #default>
        <el-form :size="size" ref="form" :model="form" class="form" :rules="rules" label-width="100px">
          <el-row :gutter="10">
            <!-- 所属父类 -->
            <el-col :span="24">
              <el-form-item prop="pid">
                <template slot="label">
                  <span>所属父类 </span>
                  <el-tooltip content="选择上级菜单，如果是最顶级，则不需要选择" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <Treeselect :class="size" :default-expand-level="1" v-model="form.pid" :options="list" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单"/>
              </el-form-item>
            </el-col>
            <!-- 菜单名称 -->
            <el-col :span="12">
              <el-form-item prop="title">
                <template slot="label">
                  <span>菜单名称 </span>
                  <el-tooltip content="菜单列表和侧栏中显示的名称" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-input tabindex="3" v-model="form.title" clearable placeholder="菜单名称"/>
              </el-form-item>
            </el-col>
            <!-- 控制器名称 -->
            <el-col :span="12">
              <el-form-item prop="controller_name">
                <template slot="label">
                  <span>控制器名称 </span>
                  <el-tooltip content="控制器的生成地址，比如Raise/Employee,表示在目录Raise目录下" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-input tabindex="5" v-model="form.controller_name" clearable @input="setComponent" placeholder="同控制器生成地址"/>
              </el-form-item>
            </el-col>
            <!-- 生成代码 -->
            <el-col :span="12">
              <el-form-item prop="create_code">
                <template slot="label">
                  <span>生成代码 </span>
                  <el-tooltip content="是否由系统自动生成前后端代码" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-radio-group v-model="form.create_code" @change="changeCode">
                  <el-radio-button :label="1">是</el-radio-button>
                  <el-radio-button :label="0">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- 创建数据表 -->
            <el-col :span="12">
              <el-form-item prop="create_table">
                <template slot="label">
                  <span>创建数据表 </span>
                  <el-tooltip content="是否为此菜单对应的模型创建数据库表" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-radio-group v-model="form.create_table">
                  <el-radio-button :label="1" checked>是</el-radio-button>
                  <el-radio-button :label="0">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- 数据表名 -->
            <el-col :span="12">
              <el-form-item prop="table_name" v-if="form.create_code == 1">
                <template slot="label">
                  <span>数据表名 </span>
                  <el-tooltip content="数据库表名，推荐按照系统默认的表名创建表" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-input tabindex="9" v-model="form.table_name" clearable placeholder="生成或者关联的数据表"/>
              </el-form-item>
            </el-col>
            <!-- 主键ID -->
            <el-col :span="12">
              <el-form-item prop="pk" v-if="form.create_code == 1">
                <template slot="label">
                  <span>主键ID </span>
                  <el-tooltip content="数据库表的主键，推荐按照系统默认的主键创建表" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-input tabindex="11" v-model="form.pk" clearable placeholder="数据表主键"/>
              </el-form-item>
            </el-col>
            <!-- 选择链接库 -->
            <el-col :span="12">
              <el-form-item prop="connect" v-if="form.create_code == 1">
                <template slot="label">
                  <span>选择链接库 </span>
                  <el-tooltip content="选择创建数据库表的数据库链接，不同的链接对应不同的服务器" placement="top-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
                <el-select tabindex="15" style="width:100%" v-model="form.connect" filterable placeholder="请选择数据表">
                  <el-option v-for="item in connects" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <!--底部-->
      <template #footer>
        <el-button :size="size" :loading="loading" type="primary" @click="submit">
          <span v-if="!loading">确 定</span>
          <span v-else>提 交 中...</span>
        </el-button>
        <el-button :size="size" @click="closeForm">取 消</el-button>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import {createMenu, getAppInfo} from '../../sys'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: 'addApiMenu',
  components: {Treeselect},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    app_id: {
      type: String,
      default: '1',
    },
    list: {
      type: Array,
    },
    connects: {
      type: Array,
    },
  },
  data() {
    return {
      form: {
        pid: null,
        title: null,
        controller_name: null,
        create_code: 1,
        status: 1,
        component_path: null,
        table_name: null,
        pk: null,
        create_table: 1,
        connect: 'mysql',
        page_type: 1,
        icon: null,
        upload_config_id: null,
        home_show: 0,
        menu_pic: null,
        home_sort: null,
        is_post: 0,
        app_id: '',
      },
      app_name: '',
      app_type: '',
      upload_list: [],
      iconDialogStatus: false,
      currentIconModel: '',
      loading: false,
      rules: {
        title: [{required: true, message: '菜单名称不能为空', trigger: 'blur'}],
        controller_name: [
          {pattern: /^[a-zA-Z\/|0-9]+$/, message: '访问路径格式错误'}
        ],
      },
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.form.pid) this.form.pid = 0;
          this.loading = true
          createMenu(this.form).then(res => {
            if (res.status == 200) {
              this.$message({message: '操作成功', type: 'success'})
              this.$emit('refesh_list')
              this.closeForm()
            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    open() {
      this.form.app_id = this.app_id
      getAppInfo().then(res=>{
        this.app_name = res.app_name;
      })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.menu_id,
        label: node.title,
        children: node.children
      }
    },
    iconOpen(model) {
      this.iconDialogStatus = true
      this.currentIconModel = model
    },
    setComponent(val) {
      if(this.app_name && val){
        this.form.component_path = this.app_name + '/' + val.toLowerCase() + '/index.vue'
      }
      this.form.table_name = val.replace(/\//g, '_').toLowerCase()
      let table_name_array = this.form.table_name.split('_');
      this.form.pk = table_name_array[table_name_array.length - 1] + '_id'
    },
    changeCode(val) {
      if (!val) {
        this.form.component_path = ''
        this.form.create_table = 0
        this.form.pk = ''
        this.form.table_name = ''
        this.disableCreateTable = true
      } else {
        this.form.create_table = 1
        this.disableCreateTable = false
        this.setComponent(this.form.controller_name)
      }
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      this.$refs['form'].resetFields()
    }
  },
}
</script>
